<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-18 15:43:42
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-11-09 18:43:26
 * @Description: 乡镇便民服务中心
 * @FilePath: \tuanfeng-mini\src\pages\map\county\index
-->
<template>
  <div class="container">
      <template v-if="list.length">
          <div class="search">
              <u-search v-model="name" :clearabled="true" placeholder="请输入服务中心关键字" action-text="查找" @change="change" @search="change"></u-search>
          </div>
          <div class="item" v-for="(item, index) in searchList" :key="index">
              <div class="left" @click="toMap(item)">
                  <div class="name">{{item.name}}</div>
              </div>
              <div class="right" @click="toMap(item)">
                  <u-icon color="#0c92ff" name="arrow-right" :size="40"></u-icon>
              </div>
          </div>
      </template>
      <Empty v-if="!loading && !list.length"></Empty>
  </div>
</template>
<script>
import Empty from "../../../components/Empty.vue"
import { getCountryMapAPI } from '../../../api/map';

export default {
  components: { Empty },
  data() {
      return {
          loading: false,
          name: "",
          list: [],
          searchList: [],
      };
  },
  onShareAppMessage() {},
  onShow() {
      this.loading = true;
      wx.showLoading({
          title: "加载中...",
      });
      getCountryMapAPI().then((res) => {
        this.list = [...res.data];
        this.searchList = [...res.data];
        wx.hideLoading();
        this.loading = false;
      })
  },
  methods: {
      toMap(item) {
        const longitude = item.longitude;
        const latitude = item.latitude;
        this.openMap(longitude, latitude, item.simpleName, item.address);
      },
      openMap(longitude, latitude, name, address){
        wx.openLocation({
          type: "gcj02",
          latitude: latitude,
          longitude: longitude,
          name: name,
          address: address     
        });
      },
      change(value) {
        this.searchList = this.list.filter((item) => {
            return item.name.indexOf(value) !== -1;
        });
      },
  },
};
</script>
<style scoped lang="scss">
@import "../../../assets/scss/common.scss";

.container {
  min-height: 100vh;
  background-color: #fafafa;
  padding: 15px;
  box-sizing: border-box;
  padding-top: 70px;
  .search {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      padding: 10px 15px;
      background-color: #fff;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
      box-sizing: border-box;
      z-index: 2;
  }
  .item {
      padding: 15px 0;
      display: flex;
      border-radius: 8px;
      background-color: #fff;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
      .left {
          flex: auto;
          padding-left: 15px;
          .name {
              font-size: 18px;
              font-weight: bold;
              // margin-bottom: 8px;
              color: #0c3b96;
          }
          .phone {
              color: #dd410d;
              text-decoration: underline;
          }
      }
      .right {
          width: 80px;
          flex: none;
          display: flex;
          justify-content: center;
          align-items: center;
      }
  }
}
</style>